<!DOCTYPE html>
<html lang="en">
<head>
    <!--
    @Author 硕鼠
    @Date 2020/4/17 8:26
    @Version 1.0
    @Description 定制一个时钟
  -->
    <meta charset="UTF-8">
    <title>Title</title>

<script>
    function toDou(n){ //字符串连接和补零
        if (n<10){
            return '0'+n;
        }else{
            return ''+n;
        }
    }
    window.onload = function () {
        var aImg =document.getElementsByTagName('img');
        function tick() {
            var oDate = new Date();
            var str = toDou(oDate.getHours())+toDou(oDate.getMinutes())+toDou(oDate.getSeconds());

            for (var i = 0;i < aImg.length;i++){
                aImg[i].src = 'img/'+str.charAt(i)+'.png';
            }
        }
        setInterval(tick,1000); //每秒钟显示一次
        tick(); // 解决刚开始的时候，时钟显示为0的问题
    };
</script>
</head>
<body style="background: black;color: white;font-size: 50px">
    <img src="img/0.png">
    <img src="img/0.png">
    <img src="img/0.png">
    <img src="img/0.png">
    <img src="img/0.png">
    <img src="img/0.png">
</body>
</html>